<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>生成器</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="//mirror.fe80.cn/layui/2.6.8/css/layui.css"  media="all">
        <style type="text/css">
            @media (max-width: 400px) {
                .layui-row{
                    padding: 3px;
                }
            }
            @media (max-width: 2000px) {
                .layui-row{
                    padding: 20px;
                }
            }
            .box{
                margin-top: 30px;
            }
            .layui-form-item .layui-input-inline {
                width: 300px;
            }
        </style>
    </head>
    <body>
        <div class="layui-row">
            <div class="layui-col-xs4">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">请输入编码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="code" autocomplete="off" class="layui-input" placeholder="请输入编码字符">
                        </div>
                    </div>
					<!-- <div class="layui-inline">
					    <label class="layui-form-label">当前时间</label>
					    <div class="layui-input-inline">
					        <input type="text" id="ctime" name="ctime" autocomplete="off" class="layui-input" placeholder="当前时间">
					    </div>
					</div> -->
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="demo1">转换</button>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs8">
                <div class="box">
                    <div id="code"></div>
                </div>
                <div class="box">
                    <canvas id="canvascode"></canvas>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="//mirror.fe80.cn/jquery/3.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="JsBarcode.all.min.js"></script>
    <script>
        $('.layui-btn').on('click',function(){
            var value = $.trim($('input[name="code"]').val());
            $("#code").empty();
            $("#code").qrcode({
                // render: "canvas", //table方式
                width:200, //宽度
                height:200, //高度
                text: value//任意内容
            });
            // $("#svgcode").JsBarcode(wii.qrcodeMaker());//or JsBarcode("#svgcode", "Hi!");
            $("#canvascode").JsBarcode(value);//or JsBarcode("#canvascode", "Hello world!");
            // JsBarcode("#imgcode", wii.qrcodeMaker());//or $("#imgcode").JsBarcode("I'm huangenai!");
        });

        var tools = {};
        // 获取url中的参数
        // 获取url的page参数  useage：wii.getUrlParam("page")
        tools.getUrlParam = function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        };

		// if(tools.getUrlParam('id')){
		// 	var id = tools.getUrlParam('id');
		// 	if(id > 0 && id < 9999){
		// 		var text = 'http://web.i.fe80.cn/'+id;
		// 		$('input[name="code"]').val(text);
		// 	}
		// }
		// $('#ctime').val((new Date()).getTime());
	</script>
</html>
